<template>
  <div>
    <div v-if="isShow('reporti')">asdfasdf</div>
    <main-body :menuData="menu" :menuList="menu" getPath="web/html/intro" setTitle="HTML 教程"></main-body>
  </div>
</template>
<script>
import MainBody from '@/components/MainBody.vue'
import mixin from '@/minixs/minix'
export default {
  name: 'HTML',
  components: {
    MainBody
  },
  mixins: [mixin],
  data() {
    return {
      menu: [{
        title: 'HTML 教程',
        key: '1',
        icon: 'el-icon-s-fold',
        children: [{
          key: '1-2',
          path: '/web/html/intro',
          title: 'HTML 简介',
          blank: '_self',
          children: []
        }, {
          key: '1-3',
          path: '/web/html/url',
          title: 'URL 简介',
          blank: '_self',
          children: []
        }, {
          key: '1-4',
          path: '/web/html/attribute',
          title: '元素的属性',
          blank: '_self',
          children: []
        }, {
          key: '1-5',
          path: '/web/html/encode',
          title: '字符编码',
          blank: '_self',
          children: []
        }, {
          key: '1-6',
          path: '/web/html/semantic',
          title: '语义结构',
          blank: '_self',
          children: []
        }, {
          key: '1-7',
          path: '/web/html/text',
          title: '文本标签',
          blank: '_self',
          children: []
        }, {
          key: '1-8',
          path: '/web/html/list',
          title: '列表标签',
          blank: '_self',
          children: []
        }, {
          key: '1-9',
          path: '/web/html/image',
          title: '图像标签',
          blank: '_self',
          children: []
        }, {
          key: '1-10',
          path: '/web/html/link',
          title: '链接标签',
          blank: '_self',
          children: []
        }, {
          key: '1-11',
          path: '/web/html/multimedia',
          title: '多媒体标签',
          blank: '_self',
          children: []
        }, {
          key: '1-12',
          path: '/web/html/iframe',
          title: 'iframe',
          blank: '_self',
          children: []
        }, {
          key: '1-13',
          path: '/web/html/table',
          title: '表格',
          blank: '_self',
          children: []
        }, {
          key: '1-14',
          path: '/web/html/form',
          title: '表单',
          blank: '_self',
          children: []
        }, {
          key: '1-15',
          path: '/web/html/elements',
          title: '其他标签',
          blank: '_self',
          children: []
        }, {
          key: '1-16',
          path: '/web/html/mobile',
          title: '移动设备网页设计',
          blank: '_self',
          children: []
        }]
      }]
    }
  },
  mounted() {
    
    // function treeForeach (tree, func) {
    //   let node, list = [...tree]
    //   while (node = list.shift()) {
    //     // debugger
    //     func(node)
    //     node.children && list.unshift(...node.children)
    //   }
    // }
    // treeForeach(arr, i => console.log(i.id))
  },
  methods: {
    isShow(row) {
      if (['processed', 'reporting'].includes(row)) {
        return true
      }
    },
    // 防抖
    debounce(func, wait) {
      let timeout;
      return function () {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(func, wait)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  counter-reset: section;
  display: flex;
  flex-direction: column;
  .arr1{
    counter-reset: subsection;
    &::before{
      counter-increment: section;
      content: counter(section) ". ";
      font-size: 18px;
      font-weight: 600;
    }
    display: flex;
    flex-direction: column;
    .arr2{
      padding-left: 10px;
      &::before{
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
}
</style>